<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>Mobi.css | A lightweight, flexible css framework that focus on mobile</title>
    <meta name="description" content="Mobi.css is a lightweight, flexible css framework that focus on mobile."/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="shortcut icon" type="image/png" href="img/mobi-logo-32.png"/>
    <link rel="stylesheet" href="css/mobi.css"/>
    <link rel="stylesheet" href="css/github-gist.css"/>
    <link rel="stylesheet" href="css/font-awesome-4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/index.css"/>
  </head>
  <body>
    <!--[if lt IE 9]>
      <p style="text-align: center!important; margin: 0 0 0.5em!important; background-color: #d9534f!important; color: #fff!important; padding: 0.5em 1em!important;">You are using an <strong>outdated</strong> browser. Please <a style="color: #fff!important; text-decoration: underline!important;" href="http://browsehappy.com/?locale=en">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div class="flex-center">
      <div class="container">
        <h1 class="row mt-15" id="mobi-css">
          <div class="col flex-middle" style="max-width:60px;">
            <img src="img/mobi-logo-512.png" alt="Mobi.css Logo" width="38"/>
          </div>
          <div class="col">Mobi.css</div>
          <div class="col text-right">
            <a href="https://github.com/xcatliu/mobi.css/" style="color:#333">
              <i class="fa fa-github"></i>
            </a>
          </div>
        </h1>
        <blockquote><p>A lightweight, flexible css framework that focus on mobile.</p></blockquote>
        <div class="row mt-30">
          <div class="col text-center">
            <i class="fa fa-leaf" style="font-size:6rem;"></i>
          </div>
          <div class="col text-center">
            <i class="fa fa-cogs" style="font-size:6rem;"></i>
          </div>
          <div class="col text-center">
            <i class="fa fa-mobile" style="font-size:6rem; transform:scale(1.35);"></i>
          </div>
        </div>
        <article>
          <%- docs %>
        </article>
        <hr/>
        <address>
          Designed and built with <i class="fa fa-heart"></i> by <a href="https://github.com/xcatliu/">@xcatliu</a>.
        </address>
      </div>
      <div class="hide-on-mobile" style="padding:0 30px;">
        <p class="text-center">Scan to view on mobile</p>
        <p><img alt="qrcode" src="img/qrcode.png" width="196"/></p>
      </div>
    </div>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-45256157-10', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
</html>
